<template>
  <div class="container">
    <navigate> 编辑家庭情况 </navigate>
    <div class="title flex_row flex_align_center">
      <div class="bar"></div>
      <div class="text">家庭背景概况</div>
    </div>

    <div class="card_family_bg">
      <template v-for="(item, i) in list">
        <!-- 选项类型（下拉选择） -->
        <van-cell-group
          v-if="item.opition_type == 1"
          class="input_outer father_relative"
        >
          <van-field
            readonly
            clickable
            v-model="item.val.name"
            :label="item.name"
            placeholder="请选择"
            @click="item.visible = true"
          />
          <v-picker
            :columns="item.templateOptions"
            valueKey="name"
            @confirm="
              item.val = $event;
              item.visible = false;
            "
            :isVisible="item.visible"
            @cancel="item.visible = false"
          />
          <img
            src="@/assets/images/common/right.png"
            class="right vertical_center"
            alt=""
          />
        </van-cell-group>

        <!-- 输入类型（文本框） -->
        <van-cell-group v-else-if="item.opition_type == 2" class="input_outer">
          <van-field
            v-model="item.val"
            :label="item.name"
            placeholder="请输入"
          />
        </van-cell-group>
      </template>
    </div>

    <div class="title flex_row flex_align_center">
      <div class="bar"></div>
      <div class="text">家庭主要成员</div>
    </div>

    <div
      class="card_family_main_member"
      v-for="(e, index) in familyMemberList"
      :key="index"
    >
      <div class="item">
        <div
          class="header input_outer father_relative flex_row flex_align_center between"
        >
          <div class="label">家庭成员{{ index + 1 }}</div>
          <div class="delete" @click="del(index)">
            <img src="@/assets/images/userRecord/delete.png" alt="" />
            删除
          </div>
        </div>
        <div class="line"></div>

        <template v-for="(item, i) in e.list">
          <van-cell-group class="input_outer">
            <van-field
              v-model="item.val"
              :label="item.name"
              placeholder="请输入"
            />
          </van-cell-group>
        </template>

        <!-- 仅在最后一个成员显示新增按钮 -->
        <div
          @click="add"
          v-if="index == familyMemberList.length - 1"
          class="add_remember flex_row flex_align_center flex_center_jc"
        >
          <img src="@/assets/images/userRecord/blue_add.png" alt="" />
          <div class="text">新增成员</div>
        </div>
      </div>
    </div>

    <div class="title flex_row flex_align_center">
      <div class="bar"></div>
      <div class="text">家庭关系问卷</div>
    </div>

    <div class="card_questionnaire">
      <div class="item" v-for="(item, index) in list3" :key="index">
        <div class="question">{{ index + 1 + "." + item.name }}</div>

        <!-- 文本输入类型 -->
        <textarea
          placeholder="请输入实际情况"
          v-model="item.val"
          v-if="item.opition_type == 2"
        ></textarea>

        <!-- 单选按钮类型 -->
        <template v-else>
          <v-radio
            class="type2"
            v-for="(e, i) in item.templateOptions"
            :key="i"
            @selected="item.val.id = $event"
            :val="e.id"
            v-model="item.val.id"
            :idText="'text' + i + index + '__'"
            :name="`name${index}__`"
            :text="e.name"
          ></v-radio>
        </template>
      </div>
    </div>

    <div class="title flex_row flex_align_center">
      <div class="bar"></div>
      <div class="text">日常家庭生活情况</div>
    </div>
    <div class="card_questionnaire">
      <div class="item" v-for="(item, index) in list4" :key="index">
        <div :class="['question', { type2: item.opition_type == 2 }]">
          {{ item.name }}
        </div>

        <!-- 文本输入类型 -->
        <textarea
          placeholder="请输入实际情况"
          v-model="item.val"
          v-if="item.opition_type == 2"
        ></textarea>

        <!-- 单选按钮类型 -->
        <template v-else>
          <v-radio
            class="type2"
            v-for="(e, i) in item.templateOptions"
            :key="i"
            @selected="item.val.id = $event"
            :val="e.id"
            v-model="item.val.id"
            :idText="'daily_text' + i + index + '__'"
            :name="`name${index}__`"
            :text="e.name"
          ></v-radio>
        </template>
      </div>
    </div>

    <button class="btn" @click="save">保存资料</button>
  </div>
</template>

<script>
import {
  getTemplateList,
  submitSelfAssessment,
  queryArchivesResults,
} from "@/api/funcation/selfAssessment";
import { mapState } from "vuex";

export default {
  data() {
    return {
      list: [], // 家庭背景概况
      list3: [], // 家庭关系问卷
      list4: [], // 日常家庭生活情况
      familyMemberList: [
        {
          list: [], // 每个成员的属性列表
        },
      ],
      quesition: [],
      list2: [], // 家庭成员模板数据
      resultData: [],
      userArchivesResults: [], // 用于存储档案结果
    };
  },
  computed: {
    ...mapState(["INFO"]),
  },
  methods: {
    async getArchivesResults() {
      const par = {
        user_id: this.INFO?.id,
        type_id: 5,
      };

      if (!par.user_id) {
        console.warn("用户ID不存在，无法获取档案结果");
        return;
      }

      try {
        const res = await queryArchivesResults(par);
        if (res.code === 200 && res.data?.length > 0 && res.data[0].content) {
          // 1. 解析content中的完整数据（包含otherData和remember）
          const parsedContent = JSON.parse(res.data[0].content);
          const otherData = parsedContent.otherData || []; // 非家庭成员数据
          const rememberData = parsedContent.remember || {
            questionIds: [],
            answerIds: [],
          }; // 家庭成员数据

          // 2. 处理非家庭成员数据回显（家庭背景、问卷等）
          otherData.forEach(({ questionId, answersId }) => {
            // 匹配对应的问题项（遍历家庭背景、家庭关系问卷、日常家庭生活）
            const targetItem = [
              ...this.list,
              ...this.list3,
              ...this.list4,
            ].find((item) => item.id === Number(questionId));
            if (!targetItem) return; // 未找到对应问题项，跳过

            // 根据问题类型设置值（与保存时的格式对应）
            if (targetItem.opition_type === 1) {
              // 下拉选择类型：根据answersId匹配模板选项中的数据
              const matchedOption = targetItem.templateOptions?.find(
                (opt) => opt.id === answersId
              ) || { id: answersId, name: "" };
              this.$set(targetItem, "val", matchedOption);
            } else if (targetItem.opition_type === 2) {
              // 文本输入类型：直接赋值
              this.$set(targetItem, "val", answersId?.toString() || "");
            } else if (targetItem.opition_type === 3) {
              // 单选按钮类型：赋值选中的id
              this.$set(targetItem, "val", answersId);
            }
          });

          // 3. 处理家庭成员数据回显
          const { questionIds, answerIds } = rememberData;
          // 清空现有家庭成员列表（准备重新填充）
          this.familyMemberList = [];

          // 遍历每个成员的答案（answerIds是二维数组，每个子数组对应一个成员）
          answerIds.forEach((memberAnswers, memberIndex) => {
            // 生成当前成员的属性列表（与questionIds顺序对应）
            const memberList = questionIds.map((qId, ansIndex) => {
              // 找到家庭成员模板中对应的问题项（list2是模板数据）
              const templateItem = this.list2.find((item) => item.id === qId);
              if (!templateItem) {
                return { id: qId, name: `未知属性${ansIndex + 1}`, val: "" };
              }
              // 赋值当前问题项的答案（answerIds中子数组的索引与questionIds对应）
              return {
                ...templateItem,
                val: memberAnswers[ansIndex]?.toString() || "", // 确保为字符串
              };
            });

            // 添加当前成员到列表
            this.familyMemberList.push({ list: memberList });
          });

          // 4. 兜底：如果没有家庭成员数据，保留至少一个空成员
          if (this.familyMemberList.length === 0) {
            this.familyMemberList = [
              {
                list: this.list2.map((item) => ({ ...item, val: "" })),
              },
            ];
          }
        } else {
          console.warn("没有档案数据或content为空");
          this.userArchivesResults = [];
        }
      } catch (error) {
        console.error("获取档案结果失败：", error);
      }
    },
    async getTemplateList(callback) {
      try {
        const res = await getTemplateList({ id: "5" });
        if (res.code == 200) {
          // 初始化家庭背景概况
          this.list = res.data[0].templates[0].children || [];
          this.list.forEach((item) => {
            this.$set(item, "visible", false);
            // 选项类型初始化为空对象而非null，避免后续访问错误
            this.$set(
              item,
              "val",
              item.opition_type === 1 ? { id: null, name: "" } : ""
            );
          });

          // 初始化家庭成员模板
          this.list2 = res.data[0].templates[1].children || [];
          // 给第一个家庭成员设置属性列表
          if (this.familyMemberList[0].list.length === 0) {
            this.familyMemberList[0].list = this.list2.map((item) => ({
              ...item,
              val: "", // 确保初始化为空字符串
            }));
          }

          // 初始化家庭关系问卷
          this.list3 = res.data[0].templates[2].children || [];
          this.list3.forEach((item) => {
            this.$set(
              item,
              "val",
              item.opition_type === 1
                ? { id: null, name: "" }
                : item.opition_type === 3
                ? null
                : ""
            );
          });
          console.log(this.list3, "k33333kkkkkkgggg");

          // 初始化日常家庭生活情况
          this.list4 = res.data[0].templates[3].children || [];
          this.list4.forEach((item) => {
            this.$set(
              item,
              "val",
              item.opition_type === 1
                ? { id: null, name: "" }
                : item.opition_type === 3
                ? null
                : ""
            );
          });

          // 执行回调
          if (typeof callback === "function") {
            callback();
          }
        }
      } catch (error) {
        console.error("获取模板数据失败：", error);
      }
    },

    // 处理单选按钮变更
    onRadioChange(item, value) {
      item.val = value;
    },
    async save() {
      // 验证用户ID是否存在
      if (!this.INFO?.id) {
        this.$toast.fail("用户信息不存在，无法保存");
        return;
      }

      // 验证家庭成员模板是否存在
      if (this.list2.length === 0) {
        this.$toast.fail("家庭成员模板数据缺失，无法保存");
        return;
      }

      // 检查家庭关系问卷和日常家庭生活情况的单选按钮是否有值
      const hasEmptyRadio = [...this.list3, ...this.list4].some(
        (item) =>
          item.opition_type === 3 &&
          (item.val === null || item.val === undefined)
      );
      if (hasEmptyRadio) {
        this.$toast.fail("请完成所有问卷问题");
        return;
      }

      // 1. 处理非家庭成员数据（家庭背景、问卷等）
      const combinedList = [...this.list, ...this.list3, ...this.list4];
      const otherData = combinedList.map((item) => {
        let answersId;
        if (item.opition_type === 1) {
          answersId = item.val?.id ?? null; // 选项类型取id
        } else if (item.opition_type === 3) {
          answersId = item.val; // 单选类型直接取值
        } else {
          answersId = item.val ?? ""; // 文本类型取输入值
        }
        return {
          questionId: item.id,
          answersId: answersId,
        };
      });

      // 2. 处理家庭成员数据，生成remember结构
      // 2.1 提取家庭成员模板的所有问题ID（questionIds）
      const questionIds = this.list2.map((item) => item.id);

      // 2.2 生成每个成员的答案数组（answerIds为二维数组）
      const answerIds = this.familyMemberList.map((member) => {
        // 按questionIds顺序提取当前成员的答案
        return questionIds.map((questionId) => {
          const targetItem = member.list.find((item) => item.id === questionId);
          return targetItem ? targetItem.val ?? "" : ""; // 默认为空字符串
        });
      });

      // 2.3 构建remember对象
      const remember = {
        questionIds: questionIds,
        answerIds: answerIds,
      };

      // 3. 组装最终提交数据
      const params = {
        user_id: this.INFO.id,
        // 提交数据包含非家庭成员数据和remember结构
        content: JSON.stringify({
          otherData: otherData,
          remember: remember,
        }),
        type_id: 5,
        source: 1,
      };

      try {
        const res = await submitSelfAssessment(params);
        if (res.code === 200) {
          this.$toast.success("修改成功！");
        } else {
          this.$toast.fail("保存失败：" + (res.msg || "未知错误"));
        }
      } catch (error) {
        console.error("保存失败：", error);
        this.$toast.fail("保存失败，请稍后重试");
      }
    },

    // 删除家庭成员
    del(index) {
      try {
        if (this.familyMemberList.length <= 1) {
          return this.$toast.fail("至少保留一个家庭成员！");
        }
        this.familyMemberList.splice(index, 1);
      } catch (error) {
        console.error("删除失败：", error);
      }
    },

    // 新增家庭成员
    add() {
      try {
        if (this.familyMemberList.length === 0 || !this.list2.length) return;

        // 复制模板结构，清空值
        const newMember = {
          list: this.list2.map((item) => ({
            ...JSON.parse(JSON.stringify(item)),
            val: "",
          })),
        };
        this.familyMemberList.push(newMember);
      } catch (error) {
        console.error("新增失败：", error);
      }
    },
  },
  async created() {
    // 先获取模板，再加载历史数据和档案
    await this.getTemplateList();
    await this.getArchivesResults();
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
@import "../styles/common.less";
</style>
